<template>
	<view :class="[primarySize()]">
		<form @submit="bindSubmit">
			<view class="container bg-white">
				<view class="reg_main">
					<view class="reg_item">
						<input name="mobile" @input="inputMobile" type="text" placeholder="输入注册手机号"
							placeholder-class="cold7" class="flex-grow-1"></input>
					</view>
					<view class="reg_item m-list-flex">
						<input name="captcha" maxlength="4" type="number" placeholder="输入验证码" placeholder-class="cold7"
							class="flex-grow-1"></input>
						<button @click="sendCaptcha" hover-class="none"
							class="send_btn">{{countdown>0?'重新发送('+countdown+')':'获取验证码'}}</button>
					</view>
					<view class="reg_item">
						<input name="password" maxlength="20" type="password" placeholder="输入新密码"
							placeholder-class="cold7" class="flex-grow-1"></input>
					</view>
					<view class="reg_item">
						<input name="repeat_password" maxlength="20" type="password" placeholder="确认新密码"
							placeholder-class="cold7" class="flex-grow-1"></input>
					</view>
					<button formType="submit" hover-class="none" class="btn1 mt50">提交</button>
				</view>

			</view>
		</form>
	</view>
</template>

<script>
	const app = getApp();
	var validate = require("../../xilu/validate.js");
	export default {
		data() {
			return {
				
				countdown: 0,
				email: '',
				mobile: ''
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		
		methods: {
			inputEmail(event) {
				this.email= event.detail.value
			},
			inputMobile(event) {
				this.mobile= event.detail.value
			},
			sendCaptcha() {
				let page = this;
				if (page.countdown > 0) {
					return;
				}
				let mobile = this.mobile;
				var rule = [{
					name: 'mobile',
					rules: ['require', 'mobile'],
					errorMsg: {
						require: '请输入手机号',
						mobile: '请输入正确的手机号'
					}
				}];
				
				if (!validate.check(mobile, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				
				this.$core.post({
					url: '/xilujob.sms/send',
					data: {
						mobile: mobile,
						event: 'resetpwd'
					},
					success(ret, response) {
						page.setData({
							countdown: 60
						});
						let timer = setInterval(function() {
							let tick = page.countdown - 1;
							page.countdown= tick;
							if (tick <= 0) {
								clearInterval(timer);
							}
						}, 1000);
					}
				});
			},
			bindSubmit(event) {
				let data = event.detail.value;
				var rule = [{
					name: 'mobile',
					rules: ['require', 'mobile'],
					errorMsg: {
						require: '请输入手机号',
						mobile: '请输入正确的手机号'
					}
				},{
					name: 'captcha',
					rules: ['require','number', 'length:4'],
					errorMsg: {
						require: '请输入验证码',
						number:'请输入4位数字验证码',
						length: '请输入4位数字验证码'
					}
				},{
					name: 'password',
					rules: ['require', 'length:3,20'],
					errorMsg: {
						require: '请输入3-20位密码',
						length: '请输入3-20位密码'
					}
				},{
					name: 'repeat_password',
					rules: ['require'],
					errorMsg: {
						require: '请再次输入密码'
					}
				}];
				
				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				if(data.password !== data.repeat_password){
					uni.showToast({
					  icon: 'none',
					  title: "两次密码不一致"
					})
					return;
				}
				data.type = 'mobile';
				this.$core.post({
					url: '/xilujob.user/resetpwd',
					data: data,
					success: ret => {
						uni.navigateBack();
						uni.showToast({
							title: '重置密码成功，请登录',
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reg_main {
		padding: 56rpx 73rpx 0;
		display: block;
	}

	.reg_item {
		box-shadow: 0px 1rpx 18rpx 0px rgba(0, 0, 0, 0.08);
		background-color: #fff;
		border-radius: 50rpx;
		line-height: 95rpx;
		font-size: 28rpx;
		padding: 0 30rpx;
		margin-bottom: 35rpx;
	}

	.reg_item input {
		height: 95rpx;
		line-height: 95rpx;
		padding: 0 17rpx;
	}


	.cold7 {
		color: #d7d7d7
	}

	.go_reg {
		font-size: 28rpx;
		color: #333;
		text-align: center;
		padding-bottom: 50rpx
	}

	.go_reg text {
		color: var(--primary)
	}

	.primary_orange {
		.send_btn {
			background-image: linear-gradient(24deg, rgb(253, 162, 0) 0%, rgb(255, 113, 0) 100%);
			font-size: 24rpx;
			color: #fff;
			line-height: 59rpx;
			height: 59rpx;
			padding: 0 20rpx;
			border-radius: 50rpx;
		}
		.btn1 {
			background: linear-gradient(24deg, rgb(253, 162, 0) 0%, rgb(255, 113, 0) 100%);
			border: 0;
			height: 82rpx;
			line-height: 82rpx;
			font-size: 28rpx;
			color: #fff;
			border-radius: 50rpx;
		}
	}

	.primary_blue {
		.send_btn {
			background: var(--primary);
			font-size: 24rpx;
			color: #fff;
			line-height: 59rpx;
			height: 59rpx;
			padding: 0 20rpx;
			border-radius: 50rpx;
		}
		
		.btn1 {
			background: var(--primary);
			border: 0;
			height: 82rpx;
			line-height: 82rpx;
			font-size: 28rpx;
			color: #fff;
			border-radius: 50rpx;
		}
	}
</style>